<template>
  <div class="tabsMain">
    <el-tabs v-model="currentIndex" @tab-click="handleClick">
      <!-- <el-tab-pane label="排班明细" name="1"> -->
      <div>
        <div>
          <!-- <div class="table_card_nav"> -->
          <!-- <div>
              <el-form :model="queryParam">
                <el-form-item label="时间日期" label-width="80px">
                  <el-date-picker
                    v-model="queryParam.yearMonth"
                    type="month"
                    placeholder="请选择"
                    value-format="yyyy-MM"
                    format="yyyy-MM"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-form>
            </div> -->
          <!-- <div class="op_right_btn">
                <button class="primary_button" @click="OrderWork">
                  生成排班
                </button>
                <button class="primary_edit" @click="Search">
                  搜索
                </button>
              </div> -->
          <!-- </div> -->
          <!-- 排班明细 -->
          <div>
            <!-- <div class="table_list" v-loading="fistLoading">
              <el-table
                v-if="!fistLoading"
                :data="tableData"
                border
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="name"
                  align="center"
                  width="150"
                  label="技师列表"
                  fixed="left"
                >
                </el-table-column>

                <el-table-column
                  :prop="item.day + ''"
                  align="center"
                  :label="item.day + '号' + '(' + item.week + ')'"
                  v-for="(item, index) in daysList"
                  :key="index"
                  width="120px"
                >
                  <template slot-scope="{ row, $index }">
                    <div v-if="!row.isEdit">
                      <span>{{ shiftObj[row[item.day].shiftId] }}</span>
                    </div>

                    <el-select
                      v-else
                      v-model="row[item.day].shiftId"
                      placeholder="请选择班次"
                      :loading="worksLoading"
                    >
                      <el-option
                        v-for="item in WorksDate"
                        :key="item.id"
                        :label="item.shiftName"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="100px">
                  <template slot-scope="{ row, $index }">
                    <el-button
                      size="mini"
                      type="text"
                      @click="EditWorkRecord(row, $index)"
                      v-if="row.isEdit === false"
                      >编辑</el-button
                    >
                    <el-button
                      size="mini"
                      type="text"
                      @click="SaveWorkRecord(row, $index)"
                      v-if="row.isEdit === true"
                      >保存</el-button
                    >
                  </template>
                </el-table-column>
              </el-table> -->
            <!-- <pagination
            :total="total"
            :page.sync="queryParams.pageNo"
            :limit.sync="queryParams.pageSize"
          /> -->
            <!-- @pagination="getList" -->
            <!-- <div></div> -->
            <!-- </div> -->
          </div>
        </div>
      </div>

      <!-- 生成排班 -->
      <el-dialog
        title="生成排班"
        :visible.sync="WorkdialogVisible"
        width="800px"
        :before-close="WorkhandleClose"
        class="no-dialog-padding n-padd"
      >
        <div class="workdialog">
          <el-form
            :model="workForm"
            :rules="Workrules"
            ref="workForm"
            label-width="100px"
            class="demo-workForm"
            label-position="top"
          >
            <el-row>
              <el-col>
                <el-form-item label="生成周期" prop="createTime">
                  <el-date-picker
                    v-model="workForm.createTime"
                    class="w-100"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="['00:00:00', '23:59:59']"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="换班方式" prop="changeType">
                  <el-select
                    v-model="workForm.changeType"
                    class="w-100"
                    placeholder="请选择换班方式"
                  >
                    <el-option
                      v-for="item in changeTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="换班周期" prop="changeValue">
                  <el-input-number
                    v-if="workForm.changeType === 1"
                    v-model="workForm.changeValue"
                    placeholder="请输入换班周期"
                    class="w-100"
                    :precision="0"
                    :controls="false"
                  ></el-input-number>
                  <el-select
                    v-model="workForm.changeValue"
                    class="w-100"
                    v-if="workForm.changeType === 2"
                    placeholder="请输入换班周期"
                  >
                    <el-option
                      v-for="item in WorkOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                  <el-input-number
                    v-if="workForm.changeType === 3"
                    v-model="workForm.changeValue"
                    placeholder="请输入换班周期"
                    class="w-100 text-left"
                    :precision="0"
                    :max="31"
                    :controls="false"
                  ></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-table :data="workForm.shiftVoList" border style="width: 100%">
                <el-table-column
                  prop="nickname"
                  align="center"
                  label="人员列表"
                  width="180"
                >
                </el-table-column>
                <el-table-column
                  prop="shiftId"
                  align="center"
                  :label="'排班' + (index + 1)"
                  width="180"
                  v-for="(item, index) in pblist"
                  :key="index"
                >
                  <template slot-scope="{ row, $index }">
                    <el-select v-model="row[index]" placeholder="请选择班次">
                      <el-option
                        v-for="item in worksList"
                        :key="item.id"
                        :label="item.shiftName"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="WorkhandleClose">取 消</el-button>
          <el-button
            type="primary"
            @click="SaveShiftWork"
            :loading="loadingSure"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- </el-tab-pane> -->

      <el-tab-pane label="班次管理" name="1">
        <!-- 班次管理 -->
        <div>
          <div>
            <!-- 上部分 title -->
            <div class="table_card_top">
              <div class="AddWorks">
                <button class="primary_button" @click="handleAdd">
                  添加班次
                </button>
              </div>
            </div>

            <div class="table_list">
              <el-table :data="worksData" stripe style="width: 100%">
                <el-table-column
                  prop="shiftName"
                  label="班次名称"
                ></el-table-column>
                <el-table-column
                  prop="startTime"
                  label="上班时间"
                ></el-table-column>
                <el-table-column prop="endTime" label="下班时间">
                </el-table-column>

                <el-table-column prop="closeState" label="班次状态">
                  <template slot-scope="scope">
                    <div>
                      {{ closeStateObj[scope.row.closeState] }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="200px">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      @click="getStoreWorks(scope.row)"
                      >编辑</el-button
                    >
                    <el-button
                      size="mini"
                      v-if="scope.row.closeState === 1"
                      type="text"
                      @click="close(scope.row, '开启')"
                      >开启</el-button
                    >
                    <el-button
                      size="mini"
                      type="text"
                      v-if="scope.row.closeState === 0"
                      @click="close(scope.row, '关闭')"
                      >关闭</el-button
                    >
                    <el-button size="mini" type="text" @click="dele(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                :total="total"
                :page.sync="queryParams.pageNo"
                :limit.sync="queryParams.pageSize"
                @pagination="getWorksList"
              />
            </div>

            <!-- 添加班次 -->
            <el-dialog
              :visible.sync="RechcomdialogVisible"
              width="500px"
              :title="title"
              class="no-dialog-padding"
              :before-close="handleClose"
            >
              <span>
                <div class="AddRules_box">
                  <el-form
                    ref="shiftForm"
                    :rules="AddRules"
                    :model="shiftForm"
                    label-position="top"
                  >
                    <el-row>
                      <el-form-item label="班次名称" prop="shiftName">
                        <el-input
                          type="text"
                          v-model="shiftForm.shiftName"
                          placeholder="请输入班次名称"
                        ></el-input>
                      </el-form-item>
                    </el-row>
                    <el-row>
                      <el-form-item label="上班时间" prop="startTime">
                        <el-time-picker
                          v-model="shiftForm.startTime"
                          placeholder="请选择上班时间"
                          class="w-100 text-left"
                          value-format="HH:mm"
                          format="HH:mm"
                        >
                        </el-time-picker>
                      </el-form-item>
                    </el-row>
                    <el-row>
                      <el-form-item label="下班时间" prop="endTime">
                        <div class="Rules_form_box">
                          <div class="Rules_form_select">
                            <el-select
                              v-model="shiftForm.endTimeType"
                              placeholder="请选择"
                              class="w-120"
                            >
                              <el-option
                                v-for="item in endTimeTypeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </div>
                          <div class="timebox">
                            <el-form-item>
                              <el-time-picker
                                v-model="shiftForm.endTime"
                                placeholder="请选择下班时间"
                                class="text-left"
                                value-format="HH:mm"
                                format="HH:mm"
                              >
                              </el-time-picker>
                            </el-form-item>
                          </div>
                        </div>
                      </el-form-item>
                    </el-row>
                  </el-form>
                </div>
              </span>
              <span slot="footer" class="dialog-footer">
                <el-button class="cancel_btn" @click="handleClose"
                  >取 消</el-button
                >
                <el-button type="primary" @click="AddRulesSubmit"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  getStoreWorksPage,
  createShift,
  getStoreWorksInfo,
  UpdateStoreWorks,
  DeleteWorks,
  updateCloseState,
  getShiftRecordMonth,
  createShiftRecords,
  updateList,
} from "@/api/bpm/shift";
import { getShiftRecordUser } from "@/api/business/BusinessIndex";
import { dayDataTime } from "@/utils/utils";
export default {
  name: "EryuoaStoreFrontendClientlist",

  data() {
    return {
      loadingSure: false,
      flagShowBtn: false,
      worksData: [],
      workData: [],
      worksLoading: false,
      worksList: [],
      WorksDate: [],

      queryParam: {
        yearMonth: "", // 排班日期
      },

      daysList: [],
      shiftRecordInfo: [],

      workForm: {
        changeType: 1,
        changeValue: undefined,
        // startDate: "",
        // endDate: "",
        createTime: [],
        shiftVoList: [],
      },
      changeTypeOptions: [
        {
          value: 1,
          label: "每隔X天换班",
        },
        {
          value: 2,
          label: "每周固定时间换班",
        },
        {
          value: 3,
          label: "每月X号换班",
        },
      ],

      endTimeTypeOptions: [
        {
          value: 0,
          label: "当天",
        },
        {
          value: 1,
          label: "次日",
        },
      ],

      endTimeTypeObj: {
        0: "当天",
        1: "次日",
      },

      // 班次状态
      closeStateObj: {
        0: "开启",
        1: "关闭",
      },

      shiftObj: {},

      options: [],
      fistLoading: false,
      WorkOptions: [
        {
          value: 1,
          label: "周一",
        },
        {
          value: 2,
          label: "周二",
        },
        {
          value: 3,
          label: "周三",
        },
        {
          value: 4,
          label: "周四",
        },
        {
          value: 5,
          label: "周五",
        },
        {
          value: 6,
          label: "周六",
        },
        {
          value: 7,
          label: "周日",
        },
      ],
      WorkdialogVisible: false,
      tableData: [],
      currentIndex: "1",
      // 查询参数
      queryParams: {
        // pageNo: 1,
        // pageSize: 10,
      },

      RechcomdialogVisible: false,
      loading: false,
      title: "",
      value: "",

      shiftForm: {
        id: "",
        shiftName: "",
        closeState: "",
        startTime: "",
        endTime: "",
        endTimeType: "",
      },

      pblist: [],

      total: 0,
      value1: "",

      queryParams: {
        pageNo: 1,
        pageSize: 10,
      },

      AddRules: {
        shiftName: [
          { required: true, message: "请输入班次名称", trigger: "blur" },
        ],
        startTime: [
          { required: true, message: "请选择上班时间", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "请选择下班时间", trigger: "blur" },
        ],
      },
      Workrules: {
        createTime: [
          { required: true, message: "请选择生成周期", trigger: "blur" },
        ],
        changeType: [
          { required: true, message: "请选择换班方式", trigger: "blur" },
        ],
        changeValue: [
          { required: true, message: "请输入换班周期", trigger: "blur" },
        ],
      },
    };
  },

  created() {
    // this.getList();
    let date = dayDataTime("obj");
    this.queryParam.yearMonth = date.y + "-" + date.m;
    // this.getWorksRecord();
    // this.getWorksLists();
    this.getWorksList();
  },

  mounted() {},

  methods: {
    // 员工
    getsellUserId() {
      getShiftRecordUser({})
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.getWork(data);
          }
        })
        .catch((err) => {});
    },

    getWork(thlist) {
      getStoreWorksPage({
        pageNo: 1,
        pageSize: 100,
      })
        .then((res) => {
          this.worksLoading = false;
          const { code, data } = res;

          if (code === 0) {
            this.pblist = data.list;
            this.workForm.shiftVoList = thlist.map((item) => {
              let obj = {
                nickname: item.nickname,
                userId: item.id,
                shiftId: "",
                changeShiftId: "",
                isRest: "",
              };
              for (let i = 0; i < data.list.length; i++) {
                obj[i] = "";
              }
              return obj;
            });
          }
        })
        .catch((err) => {
          this.worksLoading = false;
        });
    },

    WorkhandleClose() {
      this.$nextTick(() => {
        this.WorkdialogVisible = false;
        this.loadingSure = false;
      });
    },

    // 生成排班
    SaveShiftWork() {
      const { changeType, changeValue, createTime, shiftVoList } =
        this.workForm;
      let startDate = !!createTime && !!createTime[0] ? createTime[0] : "";
      let endDate = !!createTime && !!createTime[1] ? createTime[1] : "";

      const arry = shiftVoList.map((item) => {
        console.log("a", item);
        const { changeShiftId, isRest, nickname, shiftId, userId, ...other } =
          item;
        let value = [];
        for (let key in other) {
          if (!!other[key]) {
            value.push(other[key]);
          }
        }

        return {
          shiftIdList: value,
          userId: item.userId,
        };
      });

      this.loadingSure = true;

      createShiftRecords({
        changeType,
        changeValue,
        startDate,
        endDate,
        shiftVoList: arry,
      })
        .then((res) => {
          this.loadingSure = false;
          const { code } = res;
          if (code === 0) {
            this.$message.success("操作成功");
            this.getWorksRecord();
            this.WorkhandleClose();
          }
        })
        .catch((err) => {
          this.loadingSure = false;
        });
    },

    // 编辑班次
    EditWorkRecord(row, i) {
      this.tableData[i].isEdit = true;
    },

    // 保存
    SaveWorkRecord(row, i) {
      this.tableData[i].isEdit = false;
      let { isEdit, name, ...t } = row;
      console.log(t);

      let arrs = [];
      for (let key in t) {
        let item = t[key];
        // console.log(key);
        // console.log(item);
        arrs.push({
          id: item.id,
          isRest: item.isRest,
          shiftDate:
            item.yearMonth +
            "-" +
            (item.shiftDate <= 9 ? "0" + item.shiftDate : item.shiftDate),
          shiftId: item.shiftId,
          userId: item.userId,
          yearMonth: item.yearMonth,
        });
      }

      console.log(arrs);

      updateList(arrs)
        .then((res) => {
          const { code } = res;
          if (code === 0) {
            this.getWorksRecord();
          }
        })
        .catch((err) => {});
    },

    Search() {
      this.getWorksRecord();
    },

    // 排班明细
    getWorksRecord() {
      this.fistLoading = true;
      getShiftRecordMonth({ yearMonth: this.queryParam.yearMonth })
        .then((res) => {
          this.fistLoading = false;
          const { code, data } = res;
          if (code === 0) {
            this.daysList = data.daysList;

            this.tableData = data.shiftRecordInfo.map((item) => {
              let newItem = this.getDay(data.daysList, item);
              newItem.isEdit = false;
              newItem.name = item.name;

              return newItem;
            });
          }
        })
        .catch((err) => {
          this.fistLoading = false;
        });
    },

    getDay(daysList, item) {
      let obj = {};

      for (let i = 0; i < daysList.length; i++) {
        let e = daysList[i];

        if (item[e.day]) {
          obj[e.day] = {
            id: item[e.day].id,
            shiftId: item[e.day].shiftId,
            shiftDate: e.day,
            userId: item.userId,
            yearMonth: item.yearMonth,
          };
        } else {
          obj[e.day] = {
            id: "",
            shiftId: "",
            shiftDate: e.day,
            userId: item.userId,
            yearMonth: item.yearMonth,
          };
        }
      }

      return obj;
    },

    CutBtn() {
      this.flagShowBtn = !this.flagShowBtn;
      this.$forceUpdate();
    },

    OrderWork() {
      this.WorkdialogVisible = true;
      this.getsellUserId();
    },

    // 班次管理列表
    getWorksList() {
      this.loading = true;
      getStoreWorksPage(this.queryParams)
        .then((res) => {
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.worksData = data.list;
            this.total = data.total;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    getWorksLists() {
      this.worksLoading = true;
      getStoreWorksPage({
        pageNo: 1,
        pageSize: 100,
      })
        .then((res) => {
          this.worksLoading = false;
          const { code, data } = res;
          if (code === 0) {
            this.worksList = data.list;
            let WorksDate = JSON.parse(JSON.stringify(data.list));
            WorksDate.push({
              shiftName: "休息",
              id: "-1",
            });
            let shiftObj = [];
            for (let index = 0; index < WorksDate.length; index++) {
              const element = WorksDate[index];
              shiftObj[element.id] = element.shiftName;
            }

            this.shiftObj = shiftObj;
            this.WorksDate = WorksDate;
          }
        })
        .catch((err) => {
          this.worksLoading = false;
        });
    },

    handleClick(i) {
      if (this.currentIndex === "1") {
        this.getWorksRecord();
      } else if (this.currentIndex === "2") {
        this.getWorksList();
      }
    },

    // 确定
    AddRulesSubmit() {
      this.$refs["shiftForm"].validate((valid) => {
        // console.log(this.shiftForm);
        if (valid) {
          if (!this.shiftForm.id) {
            this.NewShift();
          } else {
            this.EditRecharge();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 新建
    NewShift() {
      createShift(this.shiftForm)
        .then((res) => {
          const { code } = res;
          if (code === 0) {
            this.getWorksList();
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.handleClose();
          }
        })
        .catch((err) => {});
    },

    // 编辑
    EditRecharge() {
      const { closeState, startTime, endTime, endTimeType, id, shiftName } =
        this.shiftForm;
      UpdateStoreWorks({
        closeState: closeState,
        startTime: startTime,
        endTime: endTime,
        endTimeType: endTimeType,
        id: id,
        shiftName: shiftName,
      })
        .then((res) => {
          const { code } = res;
          if (code === 0) {
            this.getWorksList();
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.handleClose();
          }
        })
        .catch((err) => {});
    },

    // 获取详情
    getStoreWorks(row) {
      this.RechcomdialogVisible = true;
      this.title = "修改班次";
      getStoreWorksInfo({ id: row.id })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.shiftForm = {
              id: data.id,
              shiftName: data.shiftName,
              closeState: data.closeState,
              startTime: data.startTime,
              endTime: data.endTime,
              endTimeType: data.endTimeType,
            };
          }
        })
        .catch((err) => {});
    },

    handleClose() {
      this.resetFormData("shiftForm");
      this.$nextTick(() => {
        this.shiftForm.id = "";
        this.RechcomdialogVisible = false;
      });
    },

    // 表单重置
    resetFormData(formName) {
      // console.log(this.$refs[formName]);
      this.$refs[formName].resetFields();
    },

    // 筛选
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetFormData("queryForm");
      this.handleQuery();
    },

    // 表单重置
    resetFormData(formName) {
      console.log(this.$refs[formName]);
      this.$refs[formName].resetFields();
    },

    // 列表 删除
    dele(row) {
      this.$confirm("班次删除后无法使用, 是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          DeleteWorks({ id: row.id }).then((res) => {
            const { code } = res;
            if (code === 0) {
              this.getWorksList();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch(() => {});
    },

    handleAdd() {
      this.RechcomdialogVisible = true;
      this.title = "添加班次";
    },

    close(row, closeState) {
      this.$confirm("确认要" + closeState + "该班次吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updateCloseState({ id: row.id }).then((res) => {
            const { code } = res;
            if (code === 0) {
              this.getWorksList();
              this.$message({
                type: "success",
                message: "操作成功!",
              });
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.w-200 {
  width: 200px;
  background: #ffffff;
  border-radius: 4px;
}

.client_name {
  font-size: 14px;
  font-weight: 400;
  color: #0052d9;
}

.give {
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 40px;
  line-height: 40px;
}

.el-form-item {
  margin-bottom: 20px;
}

.recharge_form {
  padding: 10px 24px;
}

.memberName {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}
.el_row_item {
  margin-bottom: 10px;
}
.el_row_date {
  margin-top: 20px;
}
.el_row_reason {
  margin-top: 10px;
}

.el_row_date {
  .el-form-item {
    margin-bottom: 0px;
  }
}

.separate_left {
  width: 1px;
  height: 14px;
  // background: #e9e9e9;
  margin-right: 12px;
}
.separate_right {
  width: 1px;
  height: 14px;
  // background: #e9e9e9;
  margin-left: 12px;
}

.check {
  font-size: 12px;
  color: #0052d9;
}

.list_Stores {
  height: 22px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.9);
  line-height: 22px;
  .list_Stores_item {
    height: 46px;
    line-height: 46px;
    background: #ffffff;
    padding-left: 47px;
    border-bottom: 1px solid #e7e7e7;
  }
}

.AddRules_box {
  padding: 0 24px;
  .Rules_form_box {
    display: flex;
    .Rules_form_select {
      margin-right: 10px;
    }
  }
}

.radio_box {
  display: flex;
  margin-bottom: 10px;
}

.up_ipt {
  width: 300px;
  margin-right: 20px;
}
.down_ipt {
  width: 300px;
  margin-left: 10px;
}

.sex_box {
  padding: 0 10px;
}

.ipt_number {
  position: relative;
  .percent {
    position: absolute;
    top: 0px;
    right: 10px;
    color: #333;
    font-size: 15px;
  }
}

.w-200 {
  width: 200px;
  background: #ffffff;
  border-radius: 4px;
}

.client_name {
  font-size: 14px;
  font-weight: 400;
  color: #0052d9;
}

.give {
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 40px;
  line-height: 40px;
}

.el-form-item {
  margin-bottom: 20px;
}

.recharge_form {
  padding: 10px 24px;
}

.memberName {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}
.el_row_item {
  margin-bottom: 10px;
}
.el_row_date {
  margin-top: 20px;
}
.el_row_reason {
  margin-top: 10px;
}

.el_row_date {
  .el-form-item {
    margin-bottom: 0px;
  }
}
.separate_right {
  width: 1px;
  height: 14px;
  // background: #e9e9e9;
  margin-left: 12px;
  margin-right: 12px;
}

.source_box {
  margin: 0 24px;
}

.table_card_header {
  display: flex;
  padding-left: 24px;
  font-size: 16px;
  height: 50px;
  line-height: 50px;
  margin-top: 24px;
  .work_btn {
    display: block;
    width: 120px;
    text-align: center;
    margin-left: 10px;
    background-color: #ccc;
    border-radius: 5px 5px 0 0;
    border: 1px solid #f5f5f5;
    &.active {
      background-color: #fff;
      color: #333;
    }
  }
}

// .table_list {
//   padding-bottom: 24px;
// }

.table_card_nav {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-top: 10px;
  .op_right_btn {
    // text-align: right;
    .primary_edit {
      margin-left: 10px;
      background-color: #0079fe;
      color: #fff;
      border: 1px solid #0079fe;
      padding: 6px 20px;
      border-radius: 5px;
    }
    .primary_button {
      background-color: #0079fe;
      color: #fff;
      border: 1px solid #0079fe;
      padding: 6px 20px;
      border-radius: 5px;
    }
  }
}

.table_card {
  margin-top: 0px;
}

.AddWorks {
  margin-bottom: 15px;
  .primary_button {
    background-color: #0079fe;
    color: #fff;
    border: 1px solid #0079fe;
    padding: 6px 20px;
    border-radius: 5px;
  }
}

.timebox {
  .el-date-editor.el-input {
    width: 322px;
  }
}

.timeSelete {
  display: flex;
  align-items: center;
  .zhi {
    margin: 0 20px;
  }
}

.workdialog {
  padding: 0 24px;
}

.tabsMain {
  background-color: #fff;
  padding: 24px;
}
</style>
